<template>
  <el-row justify="center" style="margin-top: 20px">
    <el-space wrap>
      <el-input v-model="input" style="width: 240px" placeholder="请输入关键词" />
      <el-button type="primary" @click="query">查询</el-button>
    </el-space>
  </el-row>
  <el-row justify="center" style="margin-top: 20px">
    <el-table
      :data="tableData"
      style="width: 85%"
      :row-class-name="tableRowClassName"
      border
      stripe
    >
      <el-table-column label="宠物照片" width="120">
        <template #default="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.avatar" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="sex" label="性别" width="120" />
      <el-table-column prop="age" label="年龄" width="120" />
      <el-table-column prop="stetament" label="绝育状态" width="120" />
      <el-table-column prop="vacc_state" label="接种状态" width="120" />
      <el-table-column prop="health" label="身体状态" width="120" />
      <el-table-column prop="other_descriptions" label="其他描述" width="120" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="你确定要申请领养吗?"
            @confirm="confirmEvent"
            @cancel="cancelEvent"
          >
            <template #reference>
              <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">
                申请领养
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import chai from '../../assets/chai.jpg'
import qiu from '../../assets/qiu.jpg'
const input = ref('')
const tableData = ref([
  {
    avatar: chai,
    name: '柴柴',
    sex: '公',
    age: '十二个月',
    stetament: '是',
    vacc_state: '是',
    health: '健康',
    other_descriptions: '无'
  },
  {
    avatar: qiu,
    name: '球球',
    sex: '母',
    age: '两周岁',
    stetament: '是',
    vacc_state: '是',
    health: '良好',
    other_descriptions: '无'
  }
])
const query = () => {
  ElMessage({
    message: '要查询的条件是：' + input.value,
    type: 'success'
  })
}
const handleEdit = (index, row) => {
  console.log(index)
  console.log(row.name)
}
</script>
